<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px" disabled>
        <el-form-item label="用户id" prop="uid">
          <el-input v-model="formData.uid" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="formData.orderNo" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="快递单号" prop="expressNo">
          <el-input v-model="formData.expressNo" placeholder="请输入快递单号" />
        </el-form-item>
        <el-form-item label="克重" prop="goldWeight">
          <el-input v-model="formData.goldWeight" placeholder="请输入克重" />
        </el-form-item>
        <el-form-item label="回收金价" prop="goldPrice">
          <el-input v-model="formData.goldPrice" placeholder="请输入回收金价" />
        </el-form-item>
        <el-form-item label="订单状态" prop="status">
          <el-select v-model="formData.status" placeholder="请选择订单状态">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.ORDER_STATUS)"
                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态" prop="paid">
          <el-select v-model="formData.paid" placeholder="请选择支付状态">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PAY_STATUS)"
                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付金额" prop="payAmount">
          <el-input v-model="formData.payAmount" placeholder="请输入支付金额" />
        </el-form-item>
        <el-form-item label="预估金额" prop="orderExpectAmount">
          <el-input v-model="formData.orderExpectAmount" placeholder="请输入预估金额" />
        </el-form-item>
        <el-form-item label="完成时间" prop="finishTime">
          <el-date-picker clearable v-model="formData.finishTime" type="date" value-format="timestamp" placeholder="选择完成时间" />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="备注（内部）" prop="mark">
          <el-input v-model="formData.mark" placeholder="请输入备注（内部）" />
        </el-form-item>
        <el-form-item label="商品图片" prop="goodsImg">
          <ImageUpload v-model="formData.goodsImg" />
        </el-form-item>
        <el-form-item label="凭证图片" prop="certificateImg">
          <ImageUpload v-model="formData.certificateImg"/>
        </el-form-item>
        <el-form-item label="取消凭证图片" prop="cancelImg">
          <ImageUpload v-model="formData.cancelImg"/>
        </el-form-item>
        <el-form-item label="金料类型" prop="goldType">
          <el-select v-model="formData.goldType" placeholder="请选择金料类型">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.RECYCLE_GOLD_TYPE)"
                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="回收方式" prop="onlineOrder">
          <el-select v-model="formData.onlineOrder" placeholder="请选择回收方式">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.ONLINE_OR_STORE)"
                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="到店时间" prop="toStoreTime">
          <el-input v-model="formData.toStoreTime" placeholder="请输入到店时间" />
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-select v-model="formData.payType" placeholder="请选择支付类型">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.RECYCLE_PAY_TYPE)"
                       :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="服务费（%）" prop="serviceFee">
          <el-input v-model="formData.serviceFee" placeholder="请输入服务费（%）" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
<!--        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>-->
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as OrderInfoApi from '@/api/system/orderinfo';
import ImageUpload from '@/components/ImageUpload';
import {parseTime} from "@/utils/ruoyi";
export default {
  name: "OrderInfoForm",
  components: {
    ImageUpload
  },
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        id: undefined,
        uid: undefined,
        orderNo: undefined,
        goldWeight: undefined,
        goldPrice: undefined,
        status: undefined,
        paid: undefined,
        payAmount: undefined,
        orderExpectAmount: undefined,
        finishTime: undefined,
        remark: undefined,
        mark: undefined,
        goodsImg: undefined,
        certificateImg: undefined,
        goldType: undefined,
        onlineOrder: undefined,
        payType: undefined,
        serviceFee: undefined,
        tenantId: undefined,
        toStoreTime: undefined,
      },
      // 表单校验
      formRules: {
      },
    };
  },
  methods: {
    parseTime,
    /** 打开弹窗 */
    async open(id) {
      this.dialogVisible = true;
      this.reset();
      // 修改时，设置数据
      if (id) {
        this.formLoading = true;
        try {
          const res = await OrderInfoApi.getOrderInfo(id);
          this.formData = res.data;
          this.formData.toStoreTime = parseTime(this.formData.toStoreTime)
          this.title = "修改回收订单";
        } finally {
          this.formLoading = false;
        }
      }
      this.title = "新增回收订单";
    },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs["formRef"].validate();
      this.formLoading = true;
      try {
        const data = this.formData;
        // 修改的提交
        if (data.id) {
          await OrderInfoApi.updateOrderInfo(data);
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          this.$emit('success');
          return;
        }
        // 添加的提交
        await OrderInfoApi.createOrderInfo(data);
        this.$modal.msgSuccess("新增成功");
        this.dialogVisible = false;
        this.$emit('success');
      } finally {
        this.formLoading = false;
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        id: undefined,
        uid: undefined,
        orderNo: undefined,
        goldWeight: undefined,
        goldPrice: undefined,
        status: undefined,
        paid: undefined,
        payAmount: undefined,
        orderExpectAmount: undefined,
        finishTime: undefined,
        remark: undefined,
        mark: undefined,
        goodsImg: undefined,
        certificateImg: undefined,
        goldType: undefined,
        onlineOrder: undefined,
        payType: undefined,
        serviceFee: undefined,
        tenantId: undefined,
        toStoreTime: undefined,
      };
      this.resetForm("formRef");
    }
  }
};
</script>
